<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Creating a Citru template</title>
	<link rel="stylesheet" href="css/doc.css" type="text/css" media="screen" title="Documentation stylesheet" charset="utf-8">
	
</head>

<body>
	
<div id="header">
	<p>Difficulty level: Medium</p>
	<p>Last revised: 2008-04-08</p>
	<p>Used Citru version: Citru Alpha Yuzu r50</p>
	<div id="logo"><a href="http://www.citru.se/"></a></div>
</div>
<div id="page">
	<h1>Creating a Citru template</h1>
	<p class="preamble">Creating a Citru template is easy, and you will only need to learn a few short lines of PHP. The most important parts are listed in the short version below.</p>
	
	<div class="infobox">
		<h2>Short version</h2>
		<ul>
			<li>Create your pages in html, but save them with the filetype .php</li>
			<li>Insert <code>&lt;?php require_once 'inc/Citru.php'; ?&gt;</code> at the first line in the file</li>
			<li>Link in the style sheet citru.css</li>
			<li>Replace any editable content with Citru modules like the following example:<br /><code>&lt;?php echo $citru->getModule("MODULE_TYPE", "INSTANCE_NAME"); ?&gt;</code></li>
			<li>Replace <code>MODULE_TYPE</code> with a valid type (ex: Text, Picture, Navigation)</li>
			<li>Replace <code>INSTANCE_NAME</code> with a descriptive name for the content (alpha numeric).</li>
		</ul>
	</div>
	
	<h2>The slightly longer version</h2>
	<h3>1. Building your site in xhtml and css</h3>
	<p>We will asume that the reader already knows proper xhtml and css, follows web standards, etc. In this section we'll just look at some general recommendations for building a Citru template in an efficient manner.</p>
	<ul>
	<li>Write your site in html, without any modules. Add some placeholder content so you'll get a good feeling for what the result will look like.</li>
	<li>It's a good idea to regularly test your design in a variety of browsers.</li>
	<li>If possible, avoid making any content holding div narrower than 140px as the module controls will fit badly otherwise.</li>
	<li>Make one file for every page you want in your site. You can arrange them in subfolders if you like.</li>
	</ul>
	
	<h3>2. Loading Citru</h3>
	<p>To enable Citru you have to load the Citru core in each page. Since this is done with php, this is a good time to rename your files to .php.</p>
	<p>By inserting the following line to the top of each page Citru will be loaded when the page is viewed. It's important that this code is on the first line, even above the doctype.</p>
	<p><code>&lt;?php require_once 'inc/Citru.php'; ?&gt;</code></p>
	<p>You will also need to load the stylesheet for Citru. This is easily done by adding the following line to the header:</p>
	<p><code>&lt;link rel="stylesheet" href="css/citru.css" type="text/css" media="screen" /&gt;</code></p>
	<p>Note that you might have to change the paths above if the file is in a subfolder.</p>

	<h3>3. Adding Citru modules</h3>
	<p>Any content that should be editable by a user must be a Citru module.</p>
	<p>When loading a module, two decisions must be made. First, the module type. The module type depends on the type of content the module holds. Some common types are: Text, Picture and Navigation. Second, the instance name. The instance name is a identifier for a pice of content and should be alpha numeric. If you want the same content on several pages, use the same instance name.</p>
	<p>A module is loaded with the following pice of php-code:</p>
	<p><code>&lt;?php echo $citru->getModule("MODULE_TYPE", "INSTANCE_NAME"); ?&gt;</code></p>
	<p>Of course you replace <code>MODULE_TYPE</code> and <code>INSTANCE_NAME</code> with your own values.</p>
	<div class="hint">
		<p>If you are unsure which modules that are available, take a look in your settings file (config/settings.php) and see which modules are loaded. The module type is always the first part of the name (ex: the TextModule has the type Text).</p>
	</div>
	
	<h3>4. Finish it off</h3>
	<p>Technically your template is finished now. Assuming that your have an installed and working version of Citru you should now be able to log in. Just type <code>your_install_dir/admin/</code> in your browser and log in with the user you created during the installation.</p>
	<p>Since your modules are most likely new you probably want to fill them up. Click the edit icon and add your content.</p>
	<p>If you would like the general public to see the content (not always the case, sometimes you might want internal content) make sure that you add the group @all to the field for View under Permissions.</p>
	<div class="warning">
		<p>Do not add the group @all to Edit, Settings or Permissions. That will let anyone change your content and is therefore inadvisable.</p>
	</div>
	
	<h3><a href="http://www.citru.se/doc">Read more about Citru</a></h3>
	
</div>

</body>
</html>
